<template>
  <el-row class="h-[100vh] items-center" :gutter="0">
    <el-col class="hidden-xs-only" :sm="10" :md="12" :lg="14">
      <img class="image" src="@/assets/images/illustration_dashboard.png" />
    </el-col>
    <el-col class="p-24" :sm="14" :md="12" :lg="10">
      <h3 class="text-2xl mb-4">登录进入 Skyline</h3>
      <p class="text-base mb-8">没有用户？<el-link type="primary">创建一个用户</el-link></p>
      <p class="mb-4">
        <el-alert title="用户邮箱：lewo@bilibili.com / password：123456" type="info" />
      </p>
      <p class="mb-4">
        <el-input v-model="username" placeholder="用户名" />
      </p>
      <p class="mb-4">
        <el-input
          v-model="password"
          placeholder="密码"
          :type="isShowPassword ? 'text' : 'password'"
        >
          <template #suffix>
            <el-icon @click="isShowPassword = !isShowPassword" class="cursor-pointer">
              <EpView v-if="isShowPassword" /> <EpHide v-else />
            </el-icon>
          </template>
        </el-input>
      </p>

      <p class="mb-4 text-right">
        <el-link type="primary">忘记密码？</el-link>
      </p>
      <p class="mb-4">
        <el-button class="w-full" size="large" color="#212b36" :loading="loading" @click="onLogin">
          登录
        </el-button>
      </p>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import useHttp from '@/hooks/useHttp'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { EpHide, EpView } from '@/assets/icons'

const userStore = useUserStore()
const router = useRouter()

const username = ref('')
const password = ref('')
const isShowPassword = ref(false)
const { data, request, loading } = useHttp<ApiResponseData<ApiAuthLoginResponseData>>()
const onLogin = async () => {
  await request(
    '/auth/login',
    {
      username: username.value,
      password: password.value
    },
    {
      method: 'POST'
    }
  )
  if (data.value?.status) {
    const { root, token, username, permissions, avatar } = data.value.data
    userStore.root = root
    userStore.token = token
    userStore.username = username
    userStore.permissions = permissions
    userStore.avatar = avatar
    router.replace('/')
  }
}
</script>

<style scoped lang="scss">
.image {
  max-width: 100%;
  height: auto;
}
</style>
